<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">


    <script>
        window.onload = function (){
            initData(1,4)
        }
        function initData(page,size){
            $.ajax({
                url: 'allstudents',
                type: 'get',
                data: {
                    page: page,
                    size: size
                },
                dataType: 'text',
                success: function (res) {
                    console.log("后台获取商品"+res)
                    let data_temp = JSON.parse(res)
                    $("#td").empty()
                    $("#tdbar").empty()
                    let datalist = data_temp.data.list
                    for (var i = 0; i < datalist.length; i++) {
                        $("<tr>  <td>"+datalist[i].studentId+"</td>" +
                            "<td>"+datalist[i].name+"</td>" +
                            "<td>"+datalist[i].gender+"</td>" +
                            "<td>"+datalist[i].birthDate+"</td>" +
                            "<td>"+datalist[i].idCard+"</td>" +
                            "<td>"+datalist[i].college+"</td>" +
                            "<td>"+datalist[i].major+"</td>" +
                            "<td>"+datalist[i].className+"</td>" +
                            "<td>"+datalist[i].status+"</td>" +
                            "<td>"+datalist[i].dormId+"</td>" +
                            "<td>"+datalist[i].bedNumber+"</td>" +
                            "<td>"+datalist[i].phone+"</td>" +
                            "<td>"+datalist[i].email+"</td>" +
                            "<td>"+datalist[i].emergencyContact+"</td>" +
                            "</tr>").appendTo($("#td"))                    }


                    $(      "<button class='btn btn-primary' onclick='initData(1,4)'>首页</button>&nbsp;&nbsp;" +
                        "<button class='btn btn-primary' onclick='initData("+(page-1)+","+4+")'>上一页</button>&nbsp;&nbsp;" +
                        "<button class='btn btn-primary' onclick='initData("+(page+1)+","+4+")'>下一页</button>&nbsp;&nbsp;" +
                        "<button class='btn btn-primary' onclick='initData(1,4)'>尾页</button>&nbsp;&nbsp;").appendTo($("#tdbar")
                    )
                }
            })
        }


        //删除
        function delRow(id,page){
            let anw=window.confirm("确定删除这条数据吗？")
            //console.log(anw)
            if(anw){
                //console.log(id,page)
                $.ajax({
                    url:'delGoods',
                    type:'post',
                    data:{
                        id:id,
                        page:page
                    },
                    dataType:"text",
                    success:function(res){
                        if(res == "Y"){
                            alert('数据删除成功');
                            initData(page,10);
                        }else{
                            alert('系统异常，刷新查看最新数据');
                        }
                    }
                })
            }else{
                return
            }
        }

        //查询
    </script>
</head>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">商品搜索</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search" oninput="queryData(this.value)" >
                </div>
            </form>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<body>

<table class="table table-striped table-bordered table-hover">
    <thead>
    <th>#</th>
    <th>学生ID</th>
    <th>姓名</th>
    <th>性别</th>
    <th>身份证号</th>
    <th>学院</th>
    <th>专业</th>
    <th>班级</th>
    <th>学籍状态</th>
    <th>宿舍ID</th>
    <th>床位号</th>
    <th>手机号</th>
    <th>邮箱</th>
    <th>紧急联系人</th>

    </thead>
    <tfoot>
    <tr>
        <td id="tdbar" colspan="11" style="text-align: center"></td>
    </tr>
    </tfoot>
</table>
</body>



</html>